<template>
	<div class="container">
		<el-row>
			<el-col class="userTitle">
				<p>角色列表</p>
			</el-col>
		</el-row>
		<section class="userContent">
			<div class="addUser">
				<el-row>
					<el-col :span="1">
						<el-button type="primary" @click="dialogRolesFormVisible = true">
							<i class="fa fa-plus" aria-hidden="true"></i>
							<span>新增角色</span>
						</el-button>
					</el-col>
					<el-col :span="4" :offset="19">
						<el-form :model="searchForm">
		  				<el-input placeholder="请输入角色名称" v-model="searchForm.roleName">
		    				<el-button slot="append" icon="search" @click.native.prevent="searchRole"></el-button>
		  				</el-input>
		  			</el-form>
					</el-col>
				</el-row>
			</div>

			<!-- 角色列表 -->
			<div class="userInfo">
				<el-table :data="tableData" border style="width: 100%">
					<el-table-column align="left" props="roleName" label="角色名称" width="130">
						<template scope="scope">
							<span>{{ scope.row.roleName }}</span>
						</template>
					</el-table-column>
					<el-table-column align="left" label="角色编码" width="130">
						<template scope="scope">
							<span>{{scope.row.roleCode}}</span>
						</template>
					</el-table-column>
					<el-table-column align="left" label="描述信息" width="170">
						<template scope="scope">
							<span>{{scope.row.description}}</span>
						</template>
					</el-table-column>
					<el-table-column align="left" label="创建时间" width="150">
						<template scope="scope">
							<span>{{scope.row.updateTime}}</span>
						</template>
					</el-table-column>
					<el-table-column label="操作" align="left">
						<template scope="scope">
							<el-button class="edit" size="small" type="text" @click="handleEdit(scope.$index, scope.row)"><i class="el-icon-edit"></i>分配权限</el-button>
							<el-button class="delete" size="small" type="text" @click.native.prevent="deleteRole(scope.$index, scope.row)"><i class="el-icon-delete"></i>删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			
			<!-- 分页 -->
			<div class="block">
		    <el-pagination
		      @size-change="handleSizeChange"
		      @current-change="handleCurrentChange"
		      :current-page.sync="currentPage"
		      :page-size="10"
		      layout="total, prev, pager, next"
		      :total= "total">
		    </el-pagination>
			</div>

			<!-- 新增角色dialog -->
			<el-dialog title="新增角色" size="tiny" :visible.sync="dialogRolesFormVisible" :close-on-click-modal="false">
			  <el-form :model="addForm">
			    <el-form-item label="角色名称" label-width="80px">
			      <el-input v-model="addForm.roleName" size="small" auto-complete="off"></el-input>
			    </el-form-item>
			    <el-form-item label="角色编码" label-width="80px">
			      <el-input v-model="addForm.roleCode" size="small" auto-complete="off"></el-input>
			    </el-form-item>
			    <el-form-item label="描述信息" label-width="80px">
						<el-input type="textarea" size="small" v-model="addForm.description"></el-input>
			    </el-form-item>
			  </el-form>
			  <div slot="footer" class="dialog-footer">
			    <el-button size="small" @click="dialogRolesFormVisible = false">取 消</el-button>
			    <el-button type="primary" size="small" @click.native.prevent="addRole">确 定</el-button>
			  </div>
			</el-dialog>

			<!-- 分配权限dialog		 -->
			<el-dialog title="分配权限" size="tiny" :visible.sync="dialogPermissionFormVisible" :close-on-click-modal="false">
				<el-tree
			  	:data="data"
			  	show-checkbox
			  	node-key="id"
			  	:default-expanded-keys="[2, 3]"
			  	:default-checked-keys="[]"
			  	:props="defaultProps">
				</el-tree>
			  <div slot="footer" class="dialog-footer">
			    <el-button size="small" @click="dialogPermissionFormVisible = false">取 消</el-button>
			    <el-button type="primary" size="small" @click="dialogFormVisible = false">确 定</el-button>
			  </div>
			</el-dialog>

		</section>
	</div>
</template>

<style lang="scss" scoped>
	.container {
		.userTitle {
			width: 100%;
			text-align: left;
			font-size: 22px;
			color: #444;
			height: 60px;
			border-bottom: 4px solid #cdd1da;
			line-height: 60px;
			padding-left: 20px;
		}
		.userContent {
			padding: 10px;
			background: #fff;
			.addUser {
				margin: 3px 10px 10px;
			}	
			.searchForm {
				.searchForm .el-col {
					height: 45px;
				}
			}		
		}
		
		.userInfo{
		 	.el-table {
				font-size: 13px;
			}
			.edit{
				color: #3c8dbc;
			}
			.delete{
				color: #ff4949;
			}		
		}
		.block {
			text-align:right;
			padding-top: 13px;
		}
	}
</style>

<script>
	import {getRole, saveRole} from '../../api/api';
	import util from '../../common/util';
	export default {
		data() {
			return {
				addForm: {
					name: '',
					desc: ''
				},
				searchForm: {
					roleName: ''
				},

        data: [
	        {
	          id: 1,
	          label: '系统管理',
	          children: [
		          {
		            id: 2,
		            label: '用户管理'
		          }, {
		            id: 3,
		            label: '角色管理'
		          }, {
		          	id: 4,
		          	label: '权限管理'
		          }
	          ]
	        },{
	          id: 5,
	          label: '业务管理',
	          children: [
		          {
		            id: 6,
		            label: '机构管理'
		          }, {
		            id: 7,
		            label: '申请管理'
		          }, {
		          	id: 8,
		          	label: '拒绝申请'
		          }
	          ]
	        }
        ],
        defaultProps: {
          children: 'children',
          label: 'label'
        },

				currentPage: 1,
				total: 1,
				dialogRolesFormVisible: false,
				dialogPermissionFormVisible: false,
				tableData: [{}]
			}
		},
		methods: {
			getRoleList() { //查询角色列表
				var _this = this;
        let paramData = {
        	pageIndex: this.currentPage,
        	pageSize: 10
        }
        getRole(paramData).then(function(res) {
        	_this.tableData = res.data.data;
        	_this.total = res.data.totalNum;
        	for (var i = 0; i < res.data.data.length; i++) {
        		if (_this.tableData[i].updateTime) {
        			_this.tableData[i].updateTime = util.formatDate.format(new Date(res.data.data[i].updateTime), 'yyyy-MM-dd')        			
        		}
        	}
        })
			},
			handleSizeChange(val) {
			},
			handleCurrentChange(val) {
				this.getRoleList();
			},
			addRole() { //新增角色
				var _this = this;
				let paramData = Object.assign({}, this.addForm);
				saveRole(paramData).then(function(res) {
					if (res.data.status === '200') {
						_this.getRoleList();
						_this.dialogRolesFormVisible = false;
					}
				})
			},
			searchRole() { //查询角色
				var _this = this;
				let paramData = {
					pageIndex: 0,
        	pageSize: 10,
					roleName: this.searchForm.roleName
				}
				getRole(paramData).then(function(res) {
					if (res.data.status === '200') {
	        	_this.tableData = res.data.data;
	        	_this.total = res.data.totalNum;
					}
				})
			},
			deleteRole(index, row) { //删除角色
				var _this = this;
        this.$confirm('此操作将永久删除该条信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
	      	_this.axios.delete('/role/deleteRole/?ids='+ row.id ).then(function(res) {
	      		if (res.data.status === '200') {
		          _this.$message({
		            type: 'success',
		            message: '删除成功!'
		          });
		          _this.getRoleList();     			
	      		}
	        })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
			},
			handleEdit(index, row) {
				var _this = this;
				this.dialogPermissionFormVisible = true;
      	this.axios.get('/role/queryPermissionsByRole?id='+ row.id ).then(function(res) {
      		if (res.data.status === '200') {
	           console.log('aaa', res)       			
      		}
        })
			}
		},
		mounted() {
			this.getRoleList();
		}
	}
</script>